<template>
	<svg 
		class="ui-svg" 
		xmlns="http://www.w3.org/2000/svg" 
		:width="iconSize.width" 
		:height="iconSize.height">
		<use :xlink:href="iconUse"></use>
	</svg>
</template>

<script setup>
	
	import { computed } from 'vue';

	const props = defineProps({
		prefix: {
			type: String,
			default: 'ui-svg_'
		},
		name: String,
		size: [String, Number, Array]
	})

	const iconUse = computed(() => {
		return `#${props.prefix}${props.name}`;
	})
	
	const iconSize = computed(() => {
		return {
			width: Array.isArray(props.size) ? props.size[0] : props.size,
			height: Array.isArray(props.size) ? props.size[1] : props.size
		}
	})
	
</script>

<style lang="scss" scoped>
	
	.ui-svg {
		fill: currentColor;
		vertical-align: baseline;
	}
	
</style>
